<!-- 超量设置 -->
<template>
  <a-card class="set-excess">
    <div>
      允许超量：
      <a-space>
      <span class="colorMain">
        {{overAmount}}
       </span>
          <a-icon class="set-excess-icon" @click="editClick" type="edit" />
      </a-space>
    </div>
    <a-modal
      title="超量设置"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p class="flex-center">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          class="set-excess-form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item  ref="excess" label="设置超量：" prop="excess">
            <a-input-number
              :formatter="limitDecimals"
              :parser="limitDecimals"
              class="setting-input"
              v-model="form.excess"
              placeholder="请设置超量"
              :min="0"
            ></a-input-number>
          </a-form-model-item>
        </a-form-model>
      </p>
    </a-modal>
  </a-card>
</template>

<script>
import { updateOverAmount } from "@/api/company/setExcess";

export default {
  name: "SetExcess",
  components: {},
  props: {
    overAmount: {
      type: Number,
      default: () => {
          return 0;
        }
      }
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 10 },
      visible: false,
      confirmLoading: false,
      form: {
        excess: undefined
      },
      rules: {
        excess: [ { required: true, message: "请设置超量", trigger: "blur" } ]
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    limitDecimals(value) {
      const reg = /^\d+(\.\d+)?$/;
      let result = reg.test(value) ? value : "";
      return result;
    },
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          updateOverAmount({
            companyId: this.$route.query.companyId,
            overAmount: this.form.excess
          }).then(res => {
            this.$message.success("操作成功");
            this.visible = false;
            this.$emit('initPage')
          });
        } else {
          return false;
        }
      });
    },
    handleCancel() {
      this.visible = false
    },
    editClick(){
      this.form.excess = undefined
      this.visible = true
    }
  }
};
</script>

<style lang="less" scoped>
.set-excess{
  min-height: 500px;
}
.set-excess-form{
  width: 100%;
}
.set-excess-icon{
  color: #a6a4a4;
  font-size: 12px;
}
.setting-input{
  width:200px;
}
</style>
